forum

Home / DeveloperSection / Forums / How to design HTML Tables

Ask Question
Harry

Harry

Follow
Harry Smith is a passionate and versatile content writer with a knack for turning words into compelling stories. With a keen eye for detail and a deep love for the written word, Harry crafts content that not only informs but also engages and captivates readers.

Can you answer this question?

Answer

1 Answers

Ravi Vishwakarma

Ravi Vishwakarma

06-Jun-2024

Designing HTML tables involves using the appropriate HTML elements to create the structure of the table and applying CSS to style it. Here’s a comprehensive guide on how to create and design HTML tables:

Basic Structure of an HTML Table

An HTML table is defined using the <table> tag. Inside the <table> tag, you use <tr> (table row) to create rows, <th> (table header) for headers, and <td> (table data) for data cells.

Basic Table Example

<!DOCTYPE html>
<html>
<head>
    <title>Basic HTML Table</title>
</head>
<body>
    <h1>Sample Table</h1>
    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
            <td>Row 2, Cell 3</td>
        </tr>
    </table>
</body>
</html>

Enhancing Table with CSS

To make tables more visually appealing, you can use CSS to style the table elements.

Styled Table Example

<!DOCTYPE html>
<html>
<head>
    <title>Styled HTML Table</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #f1f1f1;
        }
        caption {
            caption-side: top;
            font-size: 1.5em;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <table>
        <caption>Sample Styled Table</caption>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
            <td>Row 2, Cell 3</td>
        </tr>
        <tr>
            <td>Row 3, Cell 1</td>
            <td>Row 3, Cell 2</td>
            <td>Row 3, Cell 3</td>
        </tr>
    </table>
</body>
</html>

Advanced Table Styling with CSS

For more advanced styling, you can use CSS to add more sophisticated styles like fixed headers, alternating row colors, and responsive design.

Advanced Styled Table Example

<!DOCTYPE html>
<html>
<head>
    <title>Advanced Styled HTML Table</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            font-size: 1em;
            min-width: 400px;
            border-radius: 5px 5px 0 0;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
        }
        thead tr {
            background-color: #009879;
            color: #ffffff;
            text-align: left;
            font-weight: bold;
        }
        th, td {
            padding: 12px 15px;
        }
        tbody tr {
            border-bottom: 1px solid #dddddd;
        }
        tbody tr:nth-of-type(even) {
            background-color: #f3f3f3;
        }
        tbody tr:last-of-type {
            border-bottom: 2px solid #009879;
        }
        tbody tr:hover {
            background-color: #f1f1f1;
            cursor: pointer;
        }
        @media (max-width: 600px) {
            table {
                border: 0;
            }
            table caption {
                font-size: 1.3em;
            }
            thead {
                display: none;
            }
            tr {
                display: block;
                margin-bottom: 0.625em;
            }
            td {
                display: block;
                text-align: right;
                font-size: 0.8em;
                border-bottom: 1px solid #ddd;
                position: relative;
                padding-left: 50%;
            }
            td::before {
                content: attr(data-label);
                position: absolute;
                left: 0;
                width: 50%;
                padding-left: 15px;
                font-weight: bold;
                text-align: left;
            }
            td:last-child {
                border-bottom: 0;
            }
        }
    </style>
</head>
<body>
    <table>
        <caption>Advanced Styled Table</caption>
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-label="Header 1">Row 1, Cell 1</td>
                <td data-label="Header 2">Row 1, Cell 2</td>
                <td data-label="Header 3">Row 1, Cell 3</td>
            </tr>
            <tr>
                <td data-label="Header 1">Row 2, Cell 1</td>
                <td data-label="Header 2">Row 2, Cell 2</td>
                <td data-label="Header 3">Row 2, Cell 3</td>
            </tr>
            <tr>
                <td data-label="Header 1">Row 3, Cell 1</td>
                <td data-label="Header 2">Row 3, Cell 2</td>
                <td data-label="Header 3">Row 3, Cell 3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

Explanation of Advanced Styling

Table Design:

  • border-collapse: collapse;: Collapses the borders of the table into a single border.
  • margin: 20px 0;: Adds space above and below the table.
  • font-size: 1em;: Sets a base font size.
  • border-radius: 5px 5px 0 0;: Rounds the top corners of the table.
  • box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);: Adds a shadow around the table.

Header Styling:

  • background-color: #009879;: Sets a green background color for the header.
  • color: #ffffff;: Sets the text color to white.
  • text-align: left;: Aligns text to the left.

Row Styling:

  • Alternating Colors: tbody tr:nth-of-type(even) { background-color: #f3f3f3; }
  • Hover Effect: tbody tr:hover { background-color: #f1f1f1; cursor: pointer; }

Responsive Design:

  • The media query (@media (max-width: 600px)) makes the table responsive by hiding the header and making each cell act as a block with labels.

Designing HTML tables involves structuring the table with HTML and enhancing its appearance and functionality with CSS. By applying these styles, you can create tables that are not only visually appealing but also responsive and user-friendly.

MindStick Training

Liked By